<template>
  <el-form :model="dataForm"
           :rules="dataRule"
           class="login-form"
           ref="dataForm"
           @keyup.enter.native="dataFormSubmitHandle()">
    <el-form-item prop="username">
      <el-input v-model.trim="dataForm.username"
                placeholder="请输入账号">
        <span slot="prefix"
              class="el-input__icon">
          <svg class="icon-svg"
               aria-hidden="true">
            <use xlink:href="#icon-user"></use>
          </svg>
        </span>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model.trim="dataForm.password"
                type="password"
                show-password
                placeholder="请输入密码">
        <span slot="prefix"
              class="el-input__icon">
          <svg class="icon-svg"
               aria-hidden="true">
            <use xlink:href="#icon-lock"></use>
          </svg>
        </span>
      </el-input>
    </el-form-item>
    <el-form-item prop="captcha"
                  v-if="uucCaptchaPath === ''">
      <el-row :gutter="20">
        <el-col :span="14">
          <el-input v-model.trim="dataForm.code"
                    :placeholder="$t('login.captcha')">
            <span slot="prefix"
                  class="el-input__icon">
              <svg class="icon-svg"
                   aria-hidden="true">
                <use xlink:href="#icon-safetycertificate"></use>
              </svg>
            </span>
          </el-input>
        </el-col>
        <el-col :span="10"
                class="login-captcha">
          <img :src="captchaPath"
               @click="getCaptcha()">
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item v-if="captchaInfo.show && uucCaptchaPath !== ''"
                  prop="captcha">
      <el-row :gutter="20">
        <el-col :span="14">
          <el-input v-model.trim="dataForm.captcha"
                    :placeholder="captchaInfo.message">
            <span slot="prefix"
                  class="el-input__icon">
              <svg class="icon-svg"
                   aria-hidden="true">
                <use xlink:href="#icon-safetycertificate"></use>
              </svg>
            </span>
          </el-input>
        </el-col>
        <el-col :span="10"
                class="login-captchaToken">
          <img :src="uucCaptchaPath"
               @click="getCaptchaToken()">
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item class="align-left">
            <el-checkbox @change='setLockPassWork'
                         v-model.trim="lockPassWork">记住密码</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <router-link to="pwsretrun">
              <el-button type="text"
                         class="w-percent-100">忘记密码?</el-button>
            </router-link>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
                 @click="dataFormSubmitHandle()"
                 class="w-percent-100">{{ $t('login.title') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Cookies from 'js-cookie'
import Qs from 'qs'
import debounce from 'lodash/debounce'
import { messages } from '@/i18n'
import { getUUID } from '@/utils'
import CryptoTool from '@/utils/cryptoTool'
export default {
  data () {
    return {
      scale: {
        transform: `scale(1)`
      },
      lockPassWork: false,
      i18nMessages: messages,
      captchaPath: '',
      uucCaptchaPath: '',
      newCode: '',
      captchaInfo: {
        wrongTimes: 0,
        show: false,
        message: '请输入验证码'
      },
      dataForm: {
        username: '',
        password: '',
        uuid: '',
        code: ''
      }
    }
  },
  computed: {
    dataRule () {
      return {
        username: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
        password: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
        captcha: [
          { required: false, message: this.$t('validate.required'), trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.getCaptcha()
    window.sessionStorage.removeItem('regist')
    window.sessionStorage.removeItem('userInfo')
  },
  mounted () {
    const lock = localStorage.getItem('lock')
    this.lockPassWork = lock === 'true'
    if (this.lockPassWork) {
      const pwd = localStorage.getItem('pwd')
      const user = localStorage.getItem('user')
      this.dataForm.password = CryptoTool.decrypt(pwd)
      this.dataForm.username = user
      // console.log(this.dataForm)
    }
  },
  methods: {
    // 设置是否记住密码
    setLockPassWork (val) {
      this.lockPassWork = val
      // 如果密码为空，则不进行保存
      localStorage.setItem('lock', val)
      if (this.dataForm.password !== '') {
        localStorage.setItem('user', this.dataForm.username)
        localStorage.setItem('pwd', CryptoTool.encrypt(this.dataForm.password))
      }

      // 去掉勾选，删除已保存的密码
      if (!val) {
        localStorage.removeItem('pwd')
      }
    },
    // 获取验证码
    getCaptcha () {
      this.uucCaptchaPath = ''
      this.dataForm.uuid = getUUID()
      this.captchaPath = `${process.env.VUE_APP_API_URL}/captcha?uuid=${this.dataForm.uuid}`
    },
    // 登录
    loginFn () {
      this.$http.post('/loginUser', Qs.stringify(this.dataForm)).then(({ data: res }) => {
        if (res.code !== 0) {
          this.getCaptcha()
          return this.$message.error(res.msg)
        }
        Cookies.set('housekeeperToken', res.data)
        localStorage['isRuiEn'] = '1'
        console.log(1111)
        this.$router.replace({ name: 'home' })
      }).catch((e) => {
        console.log(e)
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loginFn()
        }
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style lang="scss">
body {
  background-color: transparent !important;
  .login-header {
    font-size: 20px;
    color: #00e1eb;
    .login-header-title {
      font-size: 40px;
      padding: 0;
      margin: 0;
    }
  }
  .login-captchaToken {
    img {
      width: 92px;
    }
  }
  .login-form {
    .el-input__inner {
      font-size: 20px !important;
    }
  }
  .aui-page__login {
    .login-wrapper {
      overflow: hidden;
    }
    &::before,
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      content: "";
    }
    &::before {
      // background-size: cover;
    }
    &::after {
      background-color: transparent;
    }
  }
}
</style>
